<template>
    <div class="content-wrapper">
        <el-row class="content-row">
            <el-col class="height-init" :span="24">
                <div class="container">
                    <el-row class="handle-box">
                        <el-input v-model="query.nickname" placeholder="用户昵称" class="handle-input mr10"></el-input>
                        <el-input v-model="query.phone" placeholder="用户手机" class="handle-input mr10"></el-input>
                        <el-select v-model="query.identityId" clearable placeholder="请选择身份" class="handle-input mr10">
                            <el-option
                                    v-for="item in types"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="primary" icon="el-icon-setting" v-if="checkAuth(auths.setting)" @click="editUserIdentify">设置身份</el-button>
                        <el-button type="primary" icon="el-icon-plus" v-if="checkAuth(auths.add)" @click="addUser">录入</el-button>
                    </el-row>
                    <el-row class="list-table-row">
                        <el-table
                                :data="tableData"
                                border
                                class="table"
                                height="100%"
                                ref="multipleTable"
                                header-cell-class-name="table-header"
                                @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
                            <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
                            <el-table-column prop="phone" align="center" label="手机号码" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="identityName" align="center" label="用户身份" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    <span v-if="scope.row.identityName != null">{{scope.row.identityName}}</span>
                                    <span v-if="scope.row.identityName == null">无</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" align="center" label="注册时间" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    {{renderTime(scope.row.createTime)}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row class="pagination-self">
                        <el-pagination
                                background
                                layout="total, sizes, prev, pager, next"
                                :current-page="query.pageNo"
                                :page-size="query.pageSize"
                                :total="pageTotal"
                                @size-change="handleSizeChange"
                                @current-change="handlePageChange"
                        ></el-pagination>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <!-- 编辑弹出框 -->
        <el-dialog title="设置身份" :visible.sync="addVisible" width="40%" v-loading.fullscreen.lock="fullscreenLoading">
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
                <el-row style="height: 250px">
                    <el-form-item label="用户身份" prop="identityIds"  >
                        <el-checkbox-group v-model="addForm.identityIds">
                            <el-checkbox v-for="identy in types" :label="identy.id" :key="identy.name">{{identy.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUser('addForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="新增用户" :visible.sync="editVisible" width="30%" v-loading.fullscreen.lock="fullscreenLoading">
            <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
                <el-row style="height: 250px">
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-input v-model="editForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="editForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="用户身份" prop="identityIds"  >
                        <el-checkbox-group v-model="editForm.identityIds">
                            <el-checkbox v-for="identy in types" :label="identy.id" :key="identy.name">{{identy.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUser('editForm')">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { fetchPageList, queryIdentifyList, updateUser, saveUser } from '../../../api/lhtUser/lhtUser'

export default {
    name: 'lhtUserList',
    data() {
        return {
            query: {
                nickname: '',
                identityId:'',
                phone:'',
                pageNo: 1,
                pageSize: 20
            },
            tableData: [],
            multipleSelection: [],
            addVisible:false,
            editVisible:false,
            pageTotal: 0,
            fullscreenLoading: false,
            types:[],
            addForm:{
                identityIds:[],
                id:'',
            },
            addRules: {
                identityIds: [
                    { required: true, message: '请选择身份', trigger: ['blur','change'] }
                ]
            },
            editForm:{
                identityIds:[],
                nickname:'',
                phone:''
            },
            editRules:{
                nickname: [
                    { required: true, message: '请输入昵称', trigger: ['blur','change'] }
                ],
                phone: [
                    { required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的电话号码', trigger: ['blur','change'] }
                ],
                identityIds: [
                    { required: true, message: '请选择身份', trigger: ['blur','change'] }
                ]
            }
        };
    },
    created() {
        this.getData();
        this.queryTypeList();
    },
    props:['auths'],
    methods: {
        //提交用户信息
        submitUser(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.fullscreenLoading=true;
                    saveUser(this.editForm).then(res => {
                        console.log(res);
                        if (res.code == '0') {
                            this.fullscreenLoading=false;
                            this.editVisible = false;
                            this.$message({
                                message: '录入成功',
                                type: 'success'
                            });
                            this.resetForm('editForm');
                            this.getData();
                        } else {
                            this.fullscreenLoading=false;
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //录入用户
        addUser(){
            this.resetForm('editForm');
            this.editVisible = true;
        },
        //查询分类信息
        queryTypeList(){
            queryIdentifyList().then(res=>{
                let data = res.data;
                this.types = data;
            })
        },
        /**
         * 获取列表
         */
        getData() {
            fetchPageList(this.query).then(res => {
                console.log(res);
                this.tableData = res.data.records;
                this.pageTotal = res.data.total || 50;
            });
        },
        /**
         * 弹窗编辑用户身份
         */
        editUserIdentify(){
            if(this.multipleSelection.length>0){
                if(this.multipleSelection.length==1){
                    this.resetForm('addForm');
                    this.addForm.identityIds =[];
                    this.addForm.id = this.multipleSelection[0].id;
                    let array = this.multipleSelection[0].identityIds;
                    if(array!=null && array.length>0){
                        let identy = array.split(",");
                        identy.forEach(element=>{
                            this.addForm.identityIds.push(parseInt(element));
                        })
                    }
                    this.addVisible = true;
                }else{
                    this.$message({
                        message: '只能选择一条记录进行设置!!',
                        type: 'error'
                    });
                }
            }else{
                this.$message({
                    message: '请选择记录!',
                    type: 'error'
                });
            }
        },
        /**
         * 点击修改用户身份
         */
        editUser(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.fullscreenLoading=true;
                    let json = {};
                    json.id = this.addForm.id;
                    let text ="";
                    this.addForm.identityIds.forEach((element,index)=>{
                        if(index!=0){
                            text+=',';
                        }
                        text+=element;
                    })
                    json.identityIds = text;
                    updateUser(json).then(res => {
                        console.log(res);
                        if (res.code == '0') {
                            this.fullscreenLoading=false;
                            this.addVisible = false;
                            this.$message({
                                message: '设置成功',
                                type: 'success'
                            });
                            this.resetForm('addForm');
                            this.getData();
                        } else {
                            this.fullscreenLoading=false;
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageNo', 1);
            this.getData();
        },

        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNo', val);
            this.getData();
        },
        //分页器
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        },
    }
};
</script>

<style scoped>

    .content-wrapper{
        height:100%;
        overflow-y: hidden;
    }

    .content-row{
        height: 100%;
    }

    .height-init{
        height: 100%;
    }

    .container{
        height: 100%;
    }

    .handle-box {
        height: 6.5%;
    }

    .handle-input {
        width: 120px;
        display: inline-block;
    }

    .list-table-row{
        height:83%;
    }

    .table {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .pagination-self{
        height:10%;
        text-align: right;
        margin-top: 5px;
    }
</style>
